<script setup lang="ts">
defineOptions({
  name: "baseInfo"
});

import baseInfo from "./components/baseInfo.vue";
import imageInfo from "./components/imageInfo.vue";
import filesInfo from "./components/filesInfo.vue";
import paramsInfo from "./components/paramsInfo.vue";
import abnormalInfo from "./components/abnormalInfo.vue";
import statusChangeInfo from "./components/statusChangeInfo.vue";
import { ref, onMounted, onUnmounted, provide, inject, nextTick } from "vue";
import { getFabDetail } from "@/api/modules/fab";
import { useWindowSize } from "@vueuse/core";

const { height } = useWindowSize();

const detailData = ref<any>({ files: { files: [] } });
const planArrData = ref<Array<any>>([]);
const loading = ref<boolean>(true);
const imageInfoRef = ref<InstanceType<typeof imageInfo> | null>(null);
const filesInfoRef = ref<InstanceType<typeof filesInfo> | null>(null);
const imageIds = ref<Array<string>>([]);
const fileIds = ref<Array<string>>([]);
const heightData = ref<Record<string, string>>({
  abnormalInfoHeight: "286px",
  statusChangeInfoHeight: "300px"
});
const routerQuery = inject("routerQuery", ref<Record<string, any>>({}));

provide("detailData", detailData);
provide("planArrData", planArrData);
provide("loading", loading);

const getFabDetailFn = async () => {
  const { eqpId = "" } = routerQuery.value;
  if (!eqpId) return null;
  const res = await getFabDetail(eqpId as string, () => {
    loading.value = false;
  });
  if (res) return res;
  return null;
};

const getHeight = () => {
  const boxHeight = Math.floor((height.value - 104) / 2);
  const abnormalInfoHeight = boxHeight - 32 - 32 - 16 - 32 - 8;
  heightData.value.abnormalInfoHeight = `${abnormalInfoHeight}px`;
  const statusChangeInfoHeight = boxHeight - 32 - 32 - 10;
  heightData.value.statusChangeInfoHeight = `${statusChangeInfoHeight}px`;
};

const initImageFileData = async () => {
  imageIds.value.splice(0);
  fileIds.value.splice(0);
  if (!detailData.value) return;
  const { pictures = [], files = [] } = detailData.value;
  if (!pictures?.length && !files?.length) return;
  imageIds.value.push(...pictures);
  fileIds.value.push(...files);
  await nextTick();
  await imageInfoRef.value?.init();
  await filesInfoRef.value?.init();
};

const init = async () => {
  loading.value = true;
  detailData.value = await getFabDetailFn();
  await initImageFileData();
  loading.value = false;
  getHeight();
};

init();

onMounted(() => {
  window.addEventListener("resize", getHeight, true);
});

onUnmounted(() => {
  window.onresize = null;
});
</script>

<template>
  <div class="detail-base-info">
    <div class="base-info-item base-info-images">
      <imageInfo ref="imageInfoRef" :ids="imageIds" />
    </div>
    <div class="base-info-item base-info-self">
      <baseInfo />
    </div>
    <div class="base-info-item base-info-status-change">
      <statusChangeInfo />
    </div>
    <div class="base-info-item base-info-abnormal">
      <abnormalInfo />
    </div>
    <div class="base-info-item base-info-files">
      <filesInfo ref="filesInfoRef" :ids="fileIds" />
    </div>
    <div class="base-info-item base-info-params">
      <paramsInfo />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.detail-base-info {
  width: calc(100% - 48px);
  height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(4, 25%);
  gap: 16px;

  .base-info-status-change {
    grid-area: 1 / 3 / 2 / 4;
  }

  .base-info-abnormal {
    grid-area: 1 / 4 / 3 / 5;
  }

  .base-info-params {
    grid-area: 2 / 2 / 3 / 4;
  }
}
</style>
